<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        input{
            width:50px;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div>
    <div class="pdf" style="background-image:url(/image/pdf.png);width: 453px;height: 641px;margin: 0 auto">
        <div class="form"  style="width: 85%;height: 20%;background: beige">

        </div>
        <div class="table-1" style="width: 85%;height: 20%;background: beige">
            <div id="container" style="height: 100%"></div>
        </div>
        <div class="table-2"  style="width: 85%;height: 20%;background: beige">
            <form method="post" action="form">
                <table bgcolor="#ccc">
                    <thead>
                        <tr>
                            <th></th>
                            <th>RT</th>
                            <th>Area</th>
                            <th>Height</th>
                            <th>Total area</th>
                            <th>%Area</th>
                            <th>Result</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr>
                            <td>1</td>
                            <td><input type="text" name="RT[]"></td>
                            <td><input type="text" name="Area[]"></td>
                            <td><input type="text" name="Height[]"></td>
                            <td><input type="text" name="Total area"></td>
                            <td><input type="text" name="Area2"></td>
                            <td><input type="text" name="Result"></td>
                        </tr>

                    </tbody>
                    <tbody>
                    <tr align="center">
                        <td colspan="3">
                            <input type="button" value="添加" onclick="add()"/>
                            <input type="button" value="删除" onclick="del()"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <input type="submit" value="计算">
            </form>
        </div>
<!--        <div id="container" style="height: 100%"></div>-->
    </div>
</div>




<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    var index = 1;
    //添加一行
    function add(){
        //获取新节点的索引
        index = index + 1;
        //创建一个新的节点
        var trNode = document.createElement("tr");
        trNode.innerHTML = "<tr id='tr' align='center'><td align='center' id='td'>"+index+"</td> " +
            "                            <td><input type=\"text\" name=\"RT[]\"></td>\n" +
            "                            <td><input type=\"text\" name=\"Area[]\"></td>\n" +
            "                            <td><input type=\"text\" name=\"Height[]\"></td>\n" +
            "                            <td><input type=\"text\" name=\"Total area\"></td>\n" +
            "                            <td><input type=\"text\" name=\"Area2\"></td>\n" +
            "                            <td><input type=\"text\" name=\"Result\"></td></tr>"
        var tbNode = document.getElementById("tb");
        //添加
        tbNode.appendChild(trNode);
    }
    删除一行
    function del(){
        if(index == 1){
            alert("不能再删除了呀。。。");
        }else{
            var tbNode = document.getElementById("tb");
            var delNode = tb.lastChild;
            tbNode.removeChild(delNode);
            index = index - 1;
        }
    }








</script>


</body>
</html>